// 1. 导入所需的包
import Vue from 'vue'
import Vuex from 'vuex'

// 2. 将Vuex注册为Vue的插件
Vue.use(Vuex)

// 3.创建 store 实例对象
const store = new Vuex.Store({
  /* 这里配置Vuex */
  //开启vuex严格模式，开启后就绝对不允许在组件修改数据了，如果在组件中强行修改，则会报错提示
  strict: true,
  state: {
    // 用于存数据，对比组件中的 data
    age: 20
  },
  mutations: {
    // 放【同步】方法，这里的方法用于修改 state 中的数据
    // 这里的方法是修改 state数据的唯一途径，要修改state数据只能调用这里的方法
    // 这里的每一个方法的第一个参数，永远都是 state（为了方便找到数据）
    updateAge (state, a) {
      state.age += a
    }
  },
  actions: {
    // 放【异步】方法
    // 如果有定时器、ajax请求等这种异步更新方法需要放到这里
    // 方法的第一个参数永远都是 store
    updateAgeAfter1s (store, b) {
      setTimeout(() => {
        store.commit('updateAge', b) //调用 mutation 方法的语法，通过方法修改数据
      }, 1000)
    }
  },
  getters: {
    // 放计算属性的，对比组件中的 computed
    // 区别是这里的计算属性没有 get、set 只能计算结果不能修改
    // 为了方便获取 state数据，第一个参数为 state
    abc (state) {
      // return '计算的结果'
      return state.age * state.age
    }
  }
})

// 4. 导出 store 对象
export default store
